* {
    /* 初始化 取消页面的内外边距 */
    padding: 0;
    margin: 0;
    /* 修改盒模型 */
    box-sizing: border-box;
}

.loading {
    /* 固定定位 让页面元素水平+垂直居中 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 设置动画 （线性且持续地转动） */
    animation: rotate 2s linear infinite;
}

.dot {
    /* 绝对定位 */
    position: absolute;
    /* 设置每个点的大小、颜色、形状 */
    width: 15px;
    height: 15px;
    background-color: #8A2BE2;
    border-radius: 50%;
    /* 根据点的高度调整（高度的一半） */
    margin-top: -7.5px;
    /* 根据点的宽度调整（宽度的一半） */
    margin-left: -7.5px;
}

/* 定义动画 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 将每个点均匀分布在圆周上 */
.dot:nth-child(1) {
    transform: rotate(0deg) translateX(30px);
}

.dot:nth-child(2) {
    transform: rotate(60deg) translateX(30px);
}

.dot:nth-child(3) {
    transform: rotate(120deg) translateX(30px);
}

.dot:nth-child(4) {
    transform: rotate(180deg) translateX(30px);
}

.dot:nth-child(5) {
    transform: rotate(240deg) translateX(30px);
}

.dot:nth-child(6) {
    transform: rotate(300deg) translateX(30px);
}